<template>
  <ul class="nav-ul">
    <li class="nav-li" v-for="(item, key) in data" :key="key">
      <template v-if="item.name">
        <p class="nav-name">{{item.name}}</p>
        <side-nav :data="item.subList"></side-nav>
      </template>
      <router-link active-class="nav-active" :to="{path: key}" v-else>{{item}}</router-link>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'side-nav',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" >
@import '~assets/stylesheets/main';
.nav-ul {
  font-size: 100%;
  .nav-ul {
    font-size: 96%;
  }
  .nav-li {
    margin-left: 0.4em;
    margin-bottom: 10px;
    .nav-li {
      a {
        padding: 5px;
      }
      .nav-name {
        font-size: 12px;
        color: #999;
      }
    }
    a {
      display: block;
      padding: 0 10px;
      box-sizing: border-box;
      color: #666;
      &:hover,
      &.nav-active {
        color: $vice;
      }
      &.nav-active {
        border-right: 3px solid $vice;
      }
    }
  }

  .nav-name {
    margin: 10px 0;
    font-size: 20px;
  }
}
</style>
